<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/adminLogin.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
<div class="wrap">
    <div class="loginForm">
        <h2 class="logoHead" align="center">后台管理系统</h2>
        <form class="layui-form" >
        <div class="usernameWrapDiv">
            <div class="usernameLabel">
                <label>用户名:</label>
            </div>
            <div class="usernameDiv">
                <i class="layui-icon layui-icon-username adminIcon"></i>
                <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
            </div>
        </div>
        <div class="usernameWrapDiv">
            <div class="usernameLabel">
                <label>密码:</label>
            </div>
            <div class="passwordDiv">
                <i class="layui-icon layui-icon-password adminIcon"></i>
                <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
            </div>
        </div>
        <div class="usernameWrapDiv">
            <div class="usernameLabel">
                <label>验证码:</label>
            </div>
            <div class="cardDiv">
                <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
            </div>
            <div class="codeDiv">
                <input id="loginCode" class="layui-input codeInput"  type="button">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
            </div>
<%--            <div class="layui-input-block">--%>
<%--                <button class="layui-btn" lay-submit lay-filter="testFormFilter" >登录</button>--%>
<%--            </div>--%>
            <div class="layui-input-block">
                <input class="layui-btn" lay-submit lay-filter="testFormFilter" value="登录"></input>
            </div>
        </div>
     </form>
    </div>
</div>
</body>
    <script>
        //防止在iframe里嵌套显示登录界面
        if(window !=top){
            top.location.href=location.href;
        }
        layui.use(['form','layer','jquery'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            $(function () {
                // 页面初始化生成验证码
                window.onload = createCode('#loginCode');
                // 验证码切换
                $('#loginCode').click(function () {
                    createCode('#loginCode');
                });
                // 注册事件
                $('#loginRegister').click(function () {
                    alert("敬请期待...");
                });
            });
            // 生成验证码
            function createCode(codeID) {
                var code = "";
                // 验证码长度
                var codeLength = 4;
                // 验证码dom元素
                var checkCode = $(codeID);
                // 验证码随机数
                var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                    'S','T','U','V','W','X','Y','Z'];
                for (var i = 0;i < codeLength; i++){
                    // 随机数索引
                    var index = Math.floor(Math.random()*36);
                    code += random[index];
                }
                // 将生成的随机验证码赋值
                checkCode.val(code);
            }
            // 校验验证码、用户名、密码
            function validateCode(inputID,codeID) {
                var inputCode = $(inputID).val().toUpperCase();
                var cardCode = $(codeID).val();
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                    layer.msg("用户名不能为空");
                    return false;
                }
                if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                    layer.msg("密码不能为空");
                    return false;
                }
                if (inputCode.length<=0){
                    layer.msg("验证码不能为空");
                    return false;
                }
                if (inputCode != cardCode){
                    layer.msg("请输入正确验证码");
                    return false;
                }
                return true;
            }
            form.on('submit(testFormFilter)', function(data){
                if (!validateCode('#loginCard','#loginCode')){
                    //阻断提示
                }else{
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //提交表单数据
                var loading = layer.msg('正在登录请稍后。。。', {icon: 1, shade: 0.3, time:0});
                $.ajax({
                    url:"login.do",
                    type: "POST",
                    dataType:"JSON",
                    //data:data.field,
                    data:JSON.stringify(data.field),//将js对象转换成json字符串
                    contentType: 'application/json;charset=UTF-8',
                    success:function (ret) {
                        layer.close(loading);
                        if(ret.code==0){
                            //登录成功之后，去主页
                            window.location.href="${pageContext.request.contextPath}/views/index.jsp";
                        }else
                        {
                            layer.msg(ret.msg,{icon: 5});
                        }

                    }
                })
                }
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })

        });
    </script>
<%--<head>--%>
<%--    <title>登录</title>--%>
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">--%>
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/adminLogin.css">--%>
<%--    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>--%>
<%--    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="wrap">--%>
<%--    <div class="loginForm">--%>
<%--        <form>--%>
<%--            <div class="logoHead">--%>
<%--            </div>--%>
<%--            <div class="usernameWrapDiv">--%>
<%--                <div class="usernameLabel">--%>
<%--                    <label>用户名:</label>--%>
<%--                </div>--%>
<%--                <div class="usernameDiv">--%>
<%--                    <i class="layui-icon layui-icon-username adminIcon"></i>--%>
<%--                    <input id="username" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="usernameWrapDiv">--%>
<%--                <div class="usernameLabel">--%>
<%--                    <label>密码:</label>--%>
<%--                </div>--%>
<%--                <div class="passwordDiv">--%>
<%--                    <i class="layui-icon layui-icon-password adminIcon"></i>--%>
<%--                    <input id="password" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="usernameWrapDiv">--%>
<%--                <div class="usernameLabel">--%>
<%--                    <label>验证码:</label>--%>
<%--                </div>--%>
<%--                <div class="cardDiv">--%>
<%--                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">--%>
<%--                </div>--%>
<%--                <div class="codeDiv">--%>
<%--                    <input id="loginCode" class="layui-input codeInput"  type="button">--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="usernameWrapDiv">--%>
<%--                <div class="submitLabel">--%>
<%--                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>--%>
<%--                </div>--%>
<%--                <div class="submitDiv">--%>
<%--                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--</div>--%>
<%--<script>--%>
<%--    //防止在iframe里嵌套显示登录界面&ndash;%&gt;--%>
<%--    if(window !=top){--%>
<%--        top.location.href=location.href;--%>
<%--    }--%>
<%--    layui.use(['layer'],function () {--%>
<%--        var layer = layui.layer;--%>
<%--    })--%>
<%--    $(function () {--%>
<%--        // 页面初始化生成验证码--%>
<%--        window.onload = createCode('#loginCode');--%>
<%--        // 验证码切换--%>
<%--        $('#loginCode').click(function () {--%>
<%--            createCode('#loginCode');--%>
<%--        });--%>
<%--        // 登陆事件--%>
<%--        $('#loginBtn').click(function () {--%>
<%--            login();--%>
<%--        });--%>
<%--        // 注册事件--%>
<%--        $('#loginRegister').click(function () {--%>
<%--            alert("敬请期待...");--%>
<%--        });--%>
<%--    });--%>
<%--    // 生成验证码--%>
<%--    function createCode(codeID) {--%>
<%--        var code = "";--%>
<%--        // 验证码长度--%>
<%--        var codeLength = 4;--%>
<%--        // 验证码dom元素--%>
<%--        var checkCode = $(codeID);--%>
<%--        // 验证码随机数--%>
<%--        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',--%>
<%--            'S','T','U','V','W','X','Y','Z'];--%>
<%--        for (var i = 0;i < codeLength; i++){--%>
<%--            // 随机数索引--%>
<%--            var index = Math.floor(Math.random()*36);--%>
<%--            code += random[index];--%>
<%--        }--%>
<%--        // 将生成的随机验证码赋值--%>
<%--        checkCode.val(code);--%>
<%--    }--%>
<%--    // 校验验证码、用户名、密码--%>
<%--    function validateCode(inputID,codeID) {--%>
<%--        var inputCode = $(inputID).val().toUpperCase();--%>
<%--        var cardCode = $(codeID).val();--%>
<%--        var username = $('#username').val();--%>
<%--        var password = $('#password').val();--%>
<%--        if ($.trim(username) == '' || $.trim(username).length<=0){--%>
<%--            layer.msg("用户名不能为空");--%>
<%--            return false;--%>
<%--        }--%>
<%--        if ($.trim(password) == '' || $.trim(password).length<=0){--%>
<%--            layer.msg("密码不能为空");--%>
<%--            return false;--%>
<%--        }--%>
<%--        if (inputCode.length<=0){--%>
<%--            layer.msg("验证码不能为空");--%>
<%--            return false;--%>
<%--        }--%>
<%--        if (inputCode != cardCode){--%>
<%--            layer.msg("请输入正确验证码");--%>
<%--            return false;--%>
<%--        }--%>
<%--        return true;--%>
<%--    }--%>
<%--    // 登录流程--%>
<%--    function login() {--%>
<%--        if (!validateCode('#loginCard','#loginCode')){--%>
<%--            //阻断提示--%>
<%--        }else {--%>
<%--            var loginLoadIndex = layer.load(2);--%>
<%--            $('#loginBtn').val("正在登录...");--%>
<%--            $.ajax({--%>
<%--                type:'post',--%>
<%--                url:"login.do",--%>
<%--                dataType:'JSON',--%>
<%--                data:{"username":$('#username').val(),"password":$('#password').val(),"loginCard":$('#loginCard').val()},--%>
<%--                success:function (data) {--%>
<%--                    if (data.code == 0){--%>
<%--                        layer.close(loginLoadIndex);--%>
<%--                        window.location.href="/views/index.jsp";--%>
<%--                    }else {--%>
<%--                        layer.close(loginLoadIndex);--%>
<%--                        layer.msg(data.msg);--%>

<%--                        setTimeout(function () {--%>
<%--                            location.href="/login.jsp";--%>
<%--                        },1000)--%>
<%--                    }--%>
<%--                },--%>
<%--            });--%>
<%--        }--%>

<%--    }--%>
<%--</script>--%>
<%--</body>--%>
</html>
